"use client"

import {motion} from "framer-motion";

export default function Rotate2() {

  const titles = "千里之行，始于足下，".split('');

  return (
    <main className="h-screen bg-black flex justify-center items-center">
      <motion.ul className="relatives p-5 font-mono cursor-pointer animate-spin-3000">
        {
          titles.map((title, index) => (
            <li key={index}
                style={{
                  top: "50%",
                  left: "50%",
                  transform: `translate(-50%,-50%) rotate(${360 / 10 * index}deg) translateY(-150px)`
                }}
                className="absolute text-xl text-white
            ">
              {title}
            </li>
          ))
        }
      </motion.ul>
    </main>
  )
}
